<template>
  <div class="temChangeTree blockHeight" style="overflow-y: auto;">
    <div class="tree-detail">
      <div class="treeHeader" :class="{iconFontStyle: !treeHeader}" >
        <el-dropdown v-if="treeHeader&(this.$store.state.user.memberType==='0'|this.$store.state.user.memberType==='-1')" class="btnItem" size="small" split-button type="primary" @click="handleClickAddAPI" @command="handleCommandAdd">
          <i class="el-icon-plus"></i><span style="display: inline-block;margin-left: 10px;">新建分组</span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="handleClickAddApi">新建分组</el-dropdown-item>
            <!--<el-dropdown-item command="handleClickExport">导入</el-dropdown-item>-->
          </el-dropdown-menu>
        </el-dropdown>
        <span v-if="this.$store.state.user.memberType!='0'&this.$store.state.user.memberType!='-1'" style="font-size: 20px;font-weight: 700;margin-left: 10px">分组</span>
        <i class="iconfont" @click="closeBtn">&#xeae8;</i>
      </div>
      <div class="defaultMenu" v-if="treeHeader">
        <span class="defaultMenuItem" @click="getapiList(-1,queryId)"><i class="iconfont">&#xe605;</i>所有api</span>
        <span class="defaultMenuItem" @click="getapiList(-2,queryId)"><i class="el-icon-delete"></i>回收站</span>
      </div>
      <el-tree
        v-if="treeHeader"
        :highlight-current="true"
        :data="treeData"
        :props="defaultProps"
        node-key="id"
        :expand-on-click-node="false"
        :default-expand-all="false"
        @node-click="ontreechange"
      >
        <span class="custom-tree-node" slot-scope="{ node, data }">
            <span class="treeSize" style="float:left;">{{ data.name }}</span>
          <span style="float:right;margin-top: -10px;margin-right: 10px">
          <el-dropdown @command="val => {handleCommand(val,data) }">
           <span class="el-dropdown-link" style="font-size: 20px">
              ...
            </span>
            <el-dropdown-menu slot="dropdown">
             <el-dropdown-item  command="add">新建子分组</el-dropdown-item>
             <el-dropdown-item  command="edit">编辑</el-dropdown-item>
             <el-dropdown-item  command="delete">删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
            </span>
          </span>
      </el-tree>
    </div>
    <!--dialog 新建分组-->
    <el-dialog
      v-if="dialogVisibleAddGroup"
      custom-class="dhcWebLayer"
      top="0"
      :close-on-click-modal="false"
      title="新建分组"
      :visible.sync="dialogVisibleAddGroup"
      width="40%">
      <addGroup @closeDialog="closeDialog" :addGropdata='addgroupdata' @fetchData="fetchData"></addGroup>
    </el-dialog>
    <!--dialog 编辑分组-->
    <el-dialog
      v-if="dialogVisibleEditGroup"
      custom-class="dhcWebLayer"
      top="0"
      :close-on-click-modal="false"
      title="编辑分组"
      :visible.sync="dialogVisibleEditGroup"
      width="40%">
      <editGroup @closeDialog="closeeditDialog" :addGropdata='addgroupdata' @fetchData="fetchData"></editGroup>
    </el-dialog>
  </div>
</template>

<script>
  import addGroup from './apiTreeAddGroup'
  import editGroup from './apiTreeEditGroup'
  import {
    getGroupList,
    deleteGroupItem
  } from '@/api/apiModel/api.js'
  export default {
    name: 'apiTree',
    components: {
      addGroup,
      editGroup
    },
    data() {
      return {
        queryId: this.$store.state.user.projectId,
        postListroup: {
          'condition': [
          ],
          'sort': [
          ],
          'fields': []
        },
        dialogVisibleAddGroup: false,
        dialogVisibleEditGroup: false,
        treeHeader: true,
        treeData: [],
        addgroupdata: [], // 单条分组data
        defaultProps: {
          children: 'children',
          label: 'name'
        }
      }
    },
    mounted() {
      console.log(this.$store.state.user.projectId)
      // 查询分组列表
      this.fetchData()
    },
    methods: {
      ontreechange(value) {
        this.$emit('getapiList', value.id, this.$store.state.user.projectId)
      },
      getapiList(groupId, projectId) {
        this.$emit('getapiList', groupId, projectId)
      },
      handleCommand(command, data) {
        if (command == 'add') {
          this.addSubgroup(data)
        } else if (command == 'edit') {
          this.editgroup(data)
        } else if (command == 'delete') {
          this.deletegroup(data)
        }
      },
      // 新建子分组
      addSubgroup(data) {
        this.addgroupdata = data
        this.dialogVisibleAddGroup = true
      },
      // 编辑分组
      editgroup(data) {
        this.addgroupdata = data
        this.dialogVisibleEditGroup = true
      },
      // 删除分组
      deletegroup(row) {
        this.$confirm('删除分组后，该分组下的api将全部移入回收站，该操作无法撤销，确认删除？。', '删除分组', { type: 'warning' }).then(() => {
          this.deleteAffirm(row)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      deleteAffirm(row) {
        deleteGroupItem(row.id).then(res => {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.fetchData()
        })
      },
      fetchData() {
        getGroupList(this.postListroup, this.$store.state.user.projectId, '').then(res => {
          console.log(res)
          this.treeData = res.data.data
        })
      },
      closeDialog() { // 关闭弹出层
        this.dialogVisibleAddGroup = false
      },
      closeeditDialog() {
        this.dialogVisibleEditGroup = false
      },
      closeBtn() { // 收起左侧树按钮
        this.treeHeader = !this.treeHeader
        this.$emit('handleClickClose', this.treeHeader)
      },
      handleClickAddAPI() { // 新建分组
        this.addgroupdata = {}
        this.dialogVisibleAddGroup = true
      },
      handleClickEcport() { // 导入api

      },
      handleCommandAdd(val) { // 新增按钮 下拉框菜单项
        switch (val) {
          case 'handleClickAddApi':
            this.handleClickAddAPI()
            break
          case 'handleClickExport':
            this.handleClickEcport()
            break
        }
      }
    }
  }
</script>

<style scoped>
  .iconFontStyle{
    justify-content: center !important;
  }
</style>
